<template>
  <div class="singer_container" ref="singer">
    <listView :data="Singers" @select="toSingerdetail" ref="singerList"></listView>
    <router-view></router-view>
  </div>
</template>
<script>
import { getSingerList, getSingers } from "@/api/Singer";
import { ERR_OK } from "@/api/config";
import {Singer} from "@/common/js/SingerObject";
import listView from "@/base/listView/listView";
import { mapMutations } from "vuex";
import { playlistMixin } from "@/common/js/mixin";
const ANCHOR_HEIGHT = 18;
const HOT_NAME = "热门";
const HOT_SINGER_LEN = 10;
export default {
  mixins: [playlistMixin],
  data() {
    return {
      Singers: [] //歌手数组
    };
  },
  components: {
    listView
  },

  created() {
    // this._initSingerList();
    // 测试--测试自己---测试成功
    this._initSingers();
  },
  methods: {
    // mixin
    handlePlaylist(playlist) {
      const bottom = playlist.length > 0 ? "60px" : "";
      this.$refs.singer.style.bottom = bottom;
      this.$refs.singerList.refresh();
    },
    //初始化歌手列表--测试自己---测试成功
    _initSingers() {
      getSingers().then(res => {
        if (res.code === 0) {
          this.Singers = this._normalizeSinger(
            res.singerList.data,
            res.singerList.data.singerlist
          );
        }
      });
    },
    //初始化歌手列表--之前的，暂时不用了
    _initSingerList() {
      getSingerList().then(res => {
        if (res.code === ERR_OK) {
          // this.Singers = res.data.list;
          // this._normalizeSinger(this.Singers);
        }
      });
    },
    //规范获取的歌手列表数据
    _normalizeSinger(data, singer_list) {
      //使用第三方插件，实现汉字转换成拼音
      let pinyin = require("pinyin");
      let map = {
        hot: {
          title: HOT_NAME,
          items: []
        }
      };
      singer_list.forEach((item, index) => {
        if (index < HOT_SINGER_LEN) {
          // map的hot中存放热门歌手的数据
          map.hot.items.push(
            new Singer({
              id: item.singer_mid,
              name: item.singer_name
            })
          );
        }
        //根据拼音首字母，做聚类
        const key = pinyin(item.singer_name)[0]
          .join()
          .substring(0, 1)
          .toUpperCase();
        if (!map[key]) {
          map[key] = {
            title: key,
            items: []
          };
        }
        map[key].items.push(
          new Singer({
            id: item.singer_mid,
            name: item.singer_name
          })
        );
      });
      //为了得到有序列表，需要处理map
      let hot = [];
      let ret = [];
      for (let key in map) {
        let val = map[key];
        if (val.title.match(/[a-zA-Z]/)) {
          ret.push(val);
        } else if (val.title === HOT_NAME) {
          hot.push(val);
        }
      }
      //为ret数组进行A-Z排序
      ret.sort((a, b) => {
        return a.title.charCodeAt(0) - b.title.charCodeAt(0);
      });
      return hot.concat(ret);
    },
    //点击跳转到歌手详情页
    toSingerdetail(singer) {
      this.$router.push({
        path: `/singer/${singer.id}`
      });
      this.setSinger(singer);
    },
    ...mapMutations({
      setSinger: "SET_SINGER"
    })
  }
};
</script>
<style lang="stylus"  rel="stylesheet/stylus">
@import '../../../src/common/stylus/variable.styl';

.singer_container {
  position: fixed;
  width: 100%;
  top: 88px;
  bottom 0
  display: flex;
  flex-direction: column;
  background: $color-background;

  .fixed_title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    background: $color-highlight-background;
    color: $color-text-l;
    padding-left: 20px;
  }

  .singer_list {
    width: 100%;
    // height: calc(100vh - 30px);

    .list_item {
      width: 100%;
      height: 70px;
      display: grid;
      padding: 20px 0px 0px 30px;
      grid-template-columns: 50px auto;
      grid-template-rows: repeat(3, 1fr);
      align-items: center;

      .singer_img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        grid-column: 1 / 2;
        grid-row: 1 / 4;
      }

      .singer_name {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
        padding-left: 20px;
        color: $color-text-l;
      }
    }
  }
}
</style>
